<template>
  <div class="categoryContainer">
    <div class="left">
      <div class="item" @click="changeCurrentIndex(index)" v-for="(item, index) in categoryList"
        :class="index === currentIndex ? 'active' : ''">
        {{ item.name }}
      </div>
    </div>
    <div class="right">
      <div class="right-item" @click="toDetail(item.id)" :key="item.id"
        v-for="item in categoryList[currentIndex]?.children">
        <img :src="item.imageUrl" alt="">
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqCategoryList } from '@/api';
import { onMounted, ref } from 'vue';
import type { categoryItems } from '@/types';
import { useRouter } from 'vue-router';
const router = useRouter()

let categoryList = ref<categoryItems>([])
const currentIndex = ref<number>(0)

const changeCurrentIndex = (index: number) => {
  currentIndex.value = index
}
//获取分类列表数据
const getCategoryListData = async () => {
  const res = await reqCategoryList()
  categoryList.value = res.data
}
onMounted(() => {
  getCategoryListData()
})

const toDetail = (id: string) => {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}

</script>

<style scoped lang="less">
.categoryContainer {
  height: calc(100vh - 50px);
  padding-bottom: 50px;
  display: flex;
  background-color: #f7f4f8;

  .left {
    background-color: white;
    width: 110px;
    padding: 8px 0;
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;

    .item {
      text-align: center;
      line-height: 50px;
      font-size: 13px;
    }

    .active {
      border-left: 2px solid #f3514f;
      color: #f3514f;
    }
  }

  .right {
    background-color: white;
    width: 100%;
    margin-left: 4px;
    padding: 8px 0;
    display: block;
    flex-wrap: wrap;

    .right-item {
      width: 33%;
      height: 70px;
      display: flex;
      float: left;
      margin-bottom: 15px;
      flex-direction: column;
      align-items: center;

      span {
        font-size: 13px;
        margin-top: 9px;
      }

      img {
        width: 45px;
        height: 45px;
      }
    }
  }
}
</style>